<template>
	<view class="tn-flex tn-flex-column">
		<tn-sticky class="tn-white_bg tn-pl-sm tn-pr-sm tn-pb">
			<view class="tn-pt-sm">
				<tn-search-box v-model="params.keyword" @search="getTransferMoneyList" @clear="getTransferMoneyList"
					search-button-bg-color="#F8F7F8" placeholder="请输入订单号搜索" search-button-text-color="#AAAAAA" />
			</view>
		</tn-sticky>
		<view class="tn-pl-sm tn-pr-sm">
			<loading v-if="isLoading" style="height: 60vh;"></loading>
			<view class="empty" v-else-if="transferMoneyList.length==0">
				<image
					src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
					mode="widthFix"></image>
				<text>这里空空荡荡，啥也没有留下</text>
			</view>
			<view v-else>
				<view class="tn-radius card_item tn-p-sm tn-w-full tn-mt-xs" v-for="item in transferMoneyList" :key="item.id">
					<view class="tn-flex items-center justify-between gap-2">
						<view class="tn-flex items-center tn-flex-1">
							<tn-title :title="item.nickname" mode="hLine" assist-color="tn-blue" size="lg" />
						</view>
						<view :style="[{color:statusMap[item.status]},'width:115rpx;text-align:right']">
							{{item.state_text}}
						</view>
					</view>
					<view class="tn-flex tn-flex-column justify-around tn-mt-sm">
						<text class="tn-mt-xs">
							<text>商品名称：</text>
							<text class="tn-text-sm">{{item.goods_name}}</text>
						</text>
						<text class="tn-mt-xs">
							<text>转账金额：</text>
							<text class="tn-text-sm" style="color: #00D886;">{{item.transfer_amount}} 元</text>
						</text>
						<text class="tn-mt-xs" v-if="item.transfer_remark">
							<text>转账备注：</text>
							<text class="tn-text-sm">{{item.transfer_remark}}</text>
						</text>
						<view class="tn-mt-xs" style="word-break: break-all;" v-if="item.fail_remark">
							<view class="">
								<text>失败原因：</text>
								<text class="tn-text-sm">{{item.fail_remark}}</text>
							</view>
						</view>
						<text class="tn-mt-xs" v-if="item.fail_time">
							<text>失败时间：</text>
							<text class="tn-text-sm">{{item.fail_time}}</text>
						</text>
					</view>
				</view>
				<view class="tn-pt-sm tn-pb-sm tn-flex-center">
					<uni-pagination :total="total" :current="params.page" :pageSize="params.limit"
						@change="changePage" />
				</view>
			</view>
		</view>
	</view>
	<tn-modal ref="modalRef" />
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue'
	import {
		getTransferMoneyListApi,
	} from "@/request/worktop/system.js"

	onMounted(() => {
		getTransferMoneyList()
	})

	const isLoading = ref(true)

	// 0待提交1已提交2待收款3撤回中4失败5成功6已撤回
	const statusMap = {
		0: '#333333',
		4: '#FF444F',
		3: '#FF444F',
		3: '#FF444F',
		1: '#00D886',
		5: '#01BEFF',
		2: '#FBBD12',
	}

	const modalRef = ref()
	const formRef = ref()

	const transferMoneyList = ref([])
	const params = ref({
		page: 1,
		limit: 10,
		keyword: '',
	})
	const total = ref(0)

	// 获取转账列表
	const getTransferMoneyList = () => {
		isLoading.value = true
		getTransferMoneyListApi(params.value).then(res => {
			if (res.code == 0) {
				transferMoneyList.value = res.data
				total.value = res.other.total
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 更新页码
	const changePage = (e) => {
		params.value.page = e.current
		getTransferMoneyList()
	}
	// 切换标题
	const changeSubsection = (index) => {
		params.value.page = 1
		params.value.type = index + 1
		getTransferMoneyList()
	}
</script>

<style scoped lang="scss">
</style>